<template>
	<div class="app" :style="size">
		<div class="rect drop">
			<Decorate></Decorate>
			<div class="screen">
				<div class="panel">
					<Matrix :cur="cur"></Matrix>
					<Logo :cur="!!cur"></Logo>
					<div class="state">
						<Point :cur="!!cur" :max="max"></Point>
						<p>{{ tipmsg }}</p>
						<Numbercom :number="cur?clearLines:startLines"></Numbercom>
						<p>{{i18n.level}}</p>
						<Numbercom :number="cur ? speedRun : speedStart" :length="1"></Numbercom>
						<p>{{i18n.next}}</p>
						<Next :nextshape="next"></Next>
						<div class="bottom">
							<Music></Music>
							<Pause></Pause>
							<Numbercom :time="true"></Numbercom>
						</div>
					</div>
				</div>
			</div>
		</div>
		<Keyboard :filling="filling"></Keyboard>
		<Guide></Guide>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import Decorate from "./components/Decorate.vue";
	import Matrix from "./components/Matrix.vue";
	import Logo from "./components/Logo.vue";
	import Point from "./components/Point.vue";
	import Numbercom from "./components/Number.vue";
	import Next from "./components/Next.vue";
	import Music from "./components/Music.vue";
	import Pause from "./components/Pause.vue";
	import Keyboard from "./components/Keyboard.vue";
	import Guide from "./components/Guide.vue";
	import {
		visibilityChangeEvent,
		isFocus
	} from './unit/index.js';
	import constObj from './unit/const.js';
	import states from './control/states.js';
	let {
		transform,
		lastRecord,
		speeds,
		i18n,
		lan
	} = constObj;
	export default {
		name: 'App',
		components: {
			Decorate,
			Matrix,
			Logo,
			Point,
			Numbercom,
			Next,
			Music,
			Pause,
			Keyboard,
			Guide
		},
		props: {
			drop: {
				require: true,
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				w: document.documentElement.clientWidth,
				h: document.documentElement.clientHeight,
				i18n: {
					level: i18n.level[lan],
					next: i18n.next[lan]
				},
				filling: 0
			};
		},
		computed: {
			tipmsg() {
				return this.cur ? i18n.cleans[lan] : i18n.startLine[lan]
			},
			size() {
				let filling = this.filling;
				let w = this.w;
				let h = this.h;
				let ratio = h / w;
				let scale;
				let css = {};
				if (ratio < 1.5) {
					scale = h / 960;
				} else {
					scale = w / 640;
					filling = (h - (960 * scale)) / scale / 3;
					css = {
						paddingTop: Math.floor(filling) + 42,
						paddingBottom: Math.floor(filling),
						marginTop: Math.floor(-480 - (filling * 1.5)),
					};
				}
				css[transform] = `scale(${scale})`;
				return css;
			},
			...mapState({
				matrix: (state) => {
					// console.log("matrix", state.matrix)
					return state.matrix;
				},
				cur: (state) => {
					// console.log("cur", state.cur)
					return state.cur;
				},

				points: (state) => {
					// console.log(state.points)
					return state.points;
				},
				max: (state) => {
					// console.log("max", state.max)
					return state.max;
				},
				clearLines: (state) => {
					// console.log("clearLines", state.clearLines)
					return state.clearLines;
				},
				startLines: (state) => {
					// console.log("startLines", state.startLines)
					return state.startLines;
				},
				speedRun: (state) => {
					// console.log("speedRun", state.speedRun)
					return state.speedRun;
				},
				speedStart: (state) => {
					// console.log("speedStart", state.speedStart)
					return state.speedStart;
				},
				next: (state) => {
					// console.log("next", state.next)
					return state.next;
				}
			}),
		},
		beforeCreate() {

		},
		created() {

		},
		beforeMount() {
			window.addEventListener('resize', this.resize.bind(this), true);
		},
		mounted() {
			if (visibilityChangeEvent) { // 将页面的焦点变换写入store
				document.addEventListener(visibilityChangeEvent, () => {
					states.focus(isFocus());
				}, false);
			}
			// console.log(this.matrix)
			if (lastRecord) { // 读取记录
				if (lastRecord.cur && !lastRecord.pause) { // 拿到上一次游戏的状态, 如果在游戏中且没有暂停, 游戏继续
					const speedRun = this.speedRun;
					let timeout = speeds[speedRun - 1] / 2; // 继续时, 给予当前下落速度一半的停留时间
					// 停留时间不小于最快速的速度
					timeout = speedRun < speeds[speeds.length - 1] ? speeds[speeds.length - 1] : speedRun;
					states.auto(timeout);
				}
				if (!lastRecord.cur) {
					states.overStart();
				}
			} else {
				states.overStart();
			}
		},
		methods: {
			resize() {
				this.w = document.documentElement.clientWidth;
				this.h = document.documentElement.clientHeight;
			}
		}
	};
</script>

<style lang="less">
	.app {
		width: 640px;
		padding-top: 42px;
		box-shadow: 0 0 10px #fff inset;
		border-radius: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -480px 0 0 -320px;
		background: #efcc19;


		b {
			display: block;
			width: 20px;
			height: 20px;
			padding: 2px;
			border: 2px solid #879372;
			margin: 0 2px 2px 0;
			float: left;

			&:after {
				content: '';
				display: block;
				width: 12px;
				height: 12px;
				background: #879372;
				overflow: hidden;
			}

			&.c {
				border-color: #000;

				&:after {
					background: #000;
				}
			}

			&.d {
				border-color: #560000;

				&:after {
					background: #560000;
				}
			}
			&.h {
				border-color: #8bc34a;
			
				&:after {
					background: #8bc34a;
				}
			}
		}

	}

	.rect {
		width: 480px;
		padding: 45px 0 35px;
		border: #000 solid;
		border-width: 0 10px 10px;
		margin: 0 auto;
		position: relative;

		&.drop {
			-webkit-transform: translateY(5px);
			transform: translateY(5px);
		}

	}

	.screen {
		width: 390px;
		height: 478px;
		border: solid 5px;
		border-color: #987f0f #fae36c #fae36c #987f0f;
		margin: 0 auto;
		position: relative;

		.panel {
			width: 380px;
			height: 468px;
			margin: 0 auto;
			background: #9ead86;
			padding: 8px;
			border: 2px solid #494536;
		}
	}

	.state {
		width: 108px;
		position: absolute;
		top: 0;
		right: 15px;

		p {
			line-height: 47px;
			height: 57px;
			padding: 10px 0 0;
			white-space: nowrap;
			clear: both;
		}

		.bottom {
			position: absolute;
			width: 114px;
			top: 426px;
			left: 0;
		}
	}
</style>
